<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>帐号设置 - 基本信息 - 用户中心</title>
   {include file="public/css"}
   {include file="public/js"}
</head>
<body>

{include file="public/header"}
<div class="layui-container fly-marginTop fly-user-main">
<div class="user-left-menu" >
{include file="public/left_menu"}
</div>


  <div class="fly-panel fly-panel-user user-right-content" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info" >我的资料</li>
        <li lay-id="avatar">头像</li>
        <li lay-id="pass">登陆密码</li>
        <li lay-id="pay">支付密码</li>
      </ul>
      <div class="layui-tab-content" style="padding: 20px 0;">
        <div class="layui-form  layui-tab-item layui-show">
          <form class="layui-form" method="post">
             {:token()}
           <div class="layui-form-item">
           
              <label for="L_username" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="L_username" name="nickname" required lay-verify="required" autocomplete="off"  class="layui-input" value="{$user.nickname}">
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input type="radio" name="gender" value="0" {if $user.gender ==0 }checked {/if} title="男">
                  <input type="radio" name="gender" value="1" {if $user.gender ==1 }checked {/if} title="女">
                </div>
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">手机</label>
              <div class="layui-input-inline">
              <input type="text" id="mobile" name="mobile" required lay-verify="phone" autocomplete="off"  class="layui-input"  value="{$user.mobile}">
   
              </div>
       
            </div>
            <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" id="email" name="email" required lay-verify="email" autocomplete="off"  class="layui-input"  value="{$user.email}">
              </div>
              <div class="layui-form-mid layui-word-aux">
              {if $user.is_email == 1}
                邮箱已验证
              {else}
                您的邮箱尚未验证，请：<a href="{:url('validate/email')}" style="color: #4f99cf;">验证邮箱</a>
              {/if}
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">QQ</label>
              <div class="layui-input-inline">
                <input type="text" name="qq"   required  lay-verify="qq" autocomplete="off" placeholder="" class="layui-input"  value="{$user.qq}">
              </div>
               <div class="layui-form-mid layui-word-aux">请输入真实的QQ号码，方便交易沟通</div>
            </div>
 
            <div class="layui-form-item">
              <label for="L_city" class="layui-form-label">地区</label>
              <div class="layui-input-block">
                {:area($user['provid'],$user['cityid'],$user['distid'])}
              </div>
            </div>
              <div class="layui-form-item">
     
              <div class="layui-input-block">
                 <button class="layui-btn layui-btn-normal" key="set-mine" lay-filter="form1" lay-submit>确认修改</button>
              </div>
            </div>          
        
          </div>
          
          <div class="layui-form  layui-tab-item">
            <div class="layui-form-item">
              <div class="avatar-add">
                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                <button type="button" class="layui-btn layui-btn-normal upload-img">
                  <i class="layui-icon">&#xe67c;</i>上传头像
                </button>
                <img src="{$user.avatar}">
                <span class="loading"></span>
              </div>
            </div>
          </div>
          
          <div class="layui-form  layui-tab-item">
            <form action="" method="post">
              <div class="layui-form-item">
                <label for="L_nowpass" class="layui-form-label">当前密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_nowpass" name="nowpass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_pass" name="pass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
              </div>
              <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_repass" name="repass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
               <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" key="set-mine" lay-filter="form2" lay-submit>确认修改</button>
                </div>
              </div>
            </form>
          </div>
          <div class="layui-form  layui-tab-item">
            <form action="" method="post">
              <div class="layui-form-item">
                <label for="L_nowpayword" class="layui-form-label">当前支付密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_nowpayword" name="nowpayword" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label for="L_payword" class="layui-form-label">新支付密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_payword" name="payword" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
              </div>
              <div class="layui-form-item">
                <label for="L_repayword" class="layui-form-label">确认支付密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_repayword" name="repayword" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
               <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" key="set-mine" lay-filter="form3" lay-submit>确认修改</button>
                </div>
              </div>
            </form>
          </div>     
          <div class="layui-form  layui-tab-item">
            <ul class="app-bind">
             {if $settings.oauth.qq_status}
              <li class="fly-msg app-havebind">
               <i class="fa fa-qq" aria-hidden="true" title="qq"></i>
                {if !empty($qq)}
                <span>已成功绑定，您可以使用QQ帐号直接登录，当然，您也可以</span>
                <a href="javascript:;" class="acc-unbind" data-id="{$qq.id}" >解除绑定</a>
                 {else}
                <a href="{:url('@user/oauth/qq')}" onclick="layer.msg('正在绑定QQ账号', {icon:16, shade: 0.1, time:0})" class="acc-bind" type="qq_id">立即绑定</a>
                <span>，即可使用QQ帐号登录</span>
                 {/if}
              </li>
             {/if}
               {if $settings.oauth.wechat_status}
             <li class="fly-msg">
               <i class="layui-icon layui-icon-login-wechat" title="微信"></i>
               {if !empty($weixin)}
                <span>已成功绑定，您可以使用微信直接登录，当然，您也可以</span>
                <a href="javascript:;" class="acc-unbind" data-id="{$weixin.id}">解除绑定</a>
                {else}
                <a href="{:url('@user/oauth/weixin')}" class="acc-weibo" type="weibo_id"  onclick="layer.msg('正在绑定微信账号', {icon:16, shade: 0.1, time:0})" >立即绑定</a>
                <span>，即可使用微信帐号登录</span>
                {/if}
              </li> 
              {/if}
              {if $settings.oauth.sina_status}
              <li class="fly-msg">
               <i class="layui-icon layui-icon-login-weibo" title="新浪微博"></i>
               {if !empty($sina)}
                <span>已成功绑定，您可以使用新浪微博直接登录，当然，您也可以</span>
                <a href="javascript:;" class="acc-unbind" data-id="{$sina.id}">解除绑定</a>
                {else}
                <a href="{:url('@user/oauth/sina')}" class="acc-weibo" type="weibo_id"  onclick="layer.msg('正在绑定微博账号', {icon:16, shade: 0.1, time:0})" >立即绑定</a>
                <span>，即可使用微博帐号登录</span>
                {/if}
              </li>
             {/if}
              {if $settings.oauth.baidu_status}
           <li class="fly-msg">
               <i class="layui-icon layui-icon-login-weibo" title="百度"></i>
               {if !empty($baidu)}
                <span>已成功绑定，您可以使用百度直接登录，当然，您也可以</span>
                <a href="javascript:;" class="acc-unbind" data-id="{$baidu.id}">解除绑定</a>
                {else}
                <a href="{:url('@user/oauth/baidu')}" class="acc-weibo" type="weibo_id"  onclick="layer.msg('正在绑定百度账号', {icon:16, shade: 0.1, time:0})" >立即绑定</a>
                <span>，即可使用百度帐号登录</span>
                {/if}
              </li>  
              {/if}

            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<!-- 会员底部文件 -->
{include file="public/footer"}


<script>
layui.use(['form','element','upload'], function(exports){
    var element = layui.element;
    var form = layui.form;
    var upload = layui.upload;
    //显示当前tab
    if(location.hash){
      element.tabChange('user', location.hash.replace(/^#/, ''));
    }

       element.on('tab(user)', function(){
      var othis = $(this), layid = othis.attr('lay-id');
      if(layid){
        location.hash = layid;
      }
    });
form.verify({
  qq: function(value, item){ //value：表单的值、item：表单的DOM对象
 
    if(!/^\d+\d+\d$/.test(value)){
      return '请输入正确的QQ号码';
    }
  }

});      
 //提交个人信息
  form.on('submit(form1)', function(data){


    $.post("{:url('set/info')}",data.field,function(json){
       if(json.code ==0){
         qilecms.success(json.msg);
       }
    });

    return false;
  });
//修改登录密码
  form.on('submit(form2)', function(data){
    $.post("{:url('set/editPass')}",data.field,function(json){
       if(json.code ==0){
           qilecms.success(json.msg);
            location.reload();
       }else{
           qilecms.error(json.msg);
       }
    });

    return false;
  });
//修改支付密码
  form.on('submit(form3)', function(data){
    $.post("{:url('set/editPayPass')}",data.field,function(json){
       if(json.code ==0){
           qilecms.success(json.msg);
            location.reload();
       }else{
           qilecms.error(json.msg);
       }
    });

    return false;
  });
//上传头像

  var avatarAdd = $('.avatar-add');

      upload.render({
        elem: '.upload-img'
        ,url: '{:url("upload/avatar")}'
        ,size: 50
        ,field:'image'
        ,before: function(){
          avatarAdd.find('.loading').show();
        }
        ,done: function(res){
         
          if(res.code == 0){
            $.post('{:url("set/avatar")}', {
              avatar:res.data
            }, function(res){
              location.reload();
            });
          } else {
            layer.msg(res.msg, {icon: 5});
          }
          avatarAdd.find('.loading').hide();
        }
        ,error: function(){
          avatarAdd.find('.loading').hide();
        }
      });
  
 
})
</script>
<script>
$(function(){
	 //解绑互联
  $(".acc-unbind").on('click',function(){
    var id = $(this).attr('data-id');
     $.post("{:url('user/set/unbind')}",{id:id},function(json){
         if(json.code == 0){
            qilecms.success(json.msg);
            location.reload();
            return true;
         }else{
         	return qilecms.error(json.msg);
         } 
     });
  });
});
</script>
</body>
</html>